<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 物品申请模块（物品查询，借入） -->
<div th:fragment="m_officelist" >
    <div class="panel panel-default" >
        <div class="panel-heading">物品列表</div>
        <div class="panel-body">

            <div>
                <!-- Nav tabs -->
                <ul class="nav nav-pills nav-justified" role="tablist">
                    <li role="presentation" class="active"><a href="#stationery_category" aria-controls="home" role="tab" data-toggle="tab">文具事务用品</a></li>
                    <li role="presentation"><a href="#consumable_category" aria-controls="profile" role="tab" data-toggle="tab">办公耗材</a></li>
                    <li role="presentation"><a href="#equipment_category" aria-controls="messages" role="tab" data-toggle="tab">办公设备</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <!--文具事务用品tab页 stationery==文具-->
                    <div role="tabpanel" class="tab-pane active" id="stationery_category">
                        <!--顶部搜索框-->
                        <div class="row" style="margin-top: 15px">
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="输入文具名称" v-model="searchStationeryProduct">
                                    <span class="input-group-btn">
                                        <button class="btn btn-default" type="button" @click="searchStationery">搜索</button>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--物品列表-->
                        <table class="table table-hover table-condensed">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>类型</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="stationery in stationeries">
                                <td>{{ stationery.product_name }}</td>
                                <td>{{ stationery.product_type }}</td>
                                <td>￥{{ stationery.product_price }}</td>
                                <td>{{ stationery.product_num }}</td>
                                <td>
                                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#applyModal" @click="applyStationeryProduct(stationery)" v-if="stationery.product_num>0" >申请借入</button>
                                    <button type="button" class="btn btn-danger btn-sm" disabled="disabled" v-else>库存不足</button>
                                </td>
                            </tbody>
                        </table>
                        <!--分页导航栏-->
                        <nav aria-label="Page navigation" style="text-align: center">
                            <ul class="pagination">
                                <li :class="{ 'disabled': pagination.pageNum==1 }">
                                    <a href="#" aria-label="Previous" @click="jumpPage('pre')" >
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li v-for="i in pagination.navigatepageNums" :class="{ 'active': pagination.pageNum==i }"><a href="#" @click="jumpByNumber(i)">{{ i }}</a></li>
                                <li :class="{ 'disabled': pagination.pageNum==pagination.pages }">
                                    <a href="#" aria-label="Next" @click="jumpPage('next')">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>

                    <!--办公耗材tab页 consumable==消耗-->
                    <div role="tabpanel" class="tab-pane" id="consumable_category">
                        <!--顶部搜索框-->
                        <div class="row" style="margin-top: 15px">
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="输入耗材名称" v-model="searchConsumableProduct">
                                    <span class="input-group-btn">
                                <button class="btn btn-default" type="button" @click="searchConsumable">搜索</button>
                            </span>
                                </div>
                            </div>

                            <!-- 申请物品信息提示框 -->
                            <div class="col-sm-12" >
                                <div class="alert alert-success fade hide" style="text-align: center;margin-bottom: -10px;margin-top: 10px" role="alert" ><strong>申请成功,</strong></div>
                                <div class="alert alert-danger fade hide" style="text-align: center;margin-bottom: -10px;margin-top: 10px" role="alert" ><strong>申请失败,</strong></div>
                            </div>
                        </div>
                        <!--物品列表-->
                        <table class="table table-hover table-condensed">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>类型</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="consumable in consumables">
                                <td>{{ consumable.product_name }}</td>
                                <td>{{ consumable.product_type }}</td>
                                <td>￥{{ consumable.product_price }}</td>
                                <td>{{ consumable.product_num }}</td>
                                <td>
                                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#applyModal" @click="applyConsumableProduct(consumable)" v-if="consumable.product_num>0">申请借入</button>
                                    <button type="button" class="btn btn-danger btn-sm" disabled="disabled" v-else>库存不足</button>
                                </td>
                            </tbody>
                        </table>
                        <!--分页导航栏-->
                        <nav aria-label="Page navigation" style="text-align: center">
                            <ul class="pagination">
                                <li :class="{ 'disabled': pagination.pageNum==1 }">
                                    <a href="#" aria-label="Previous" @click="jumpPage('pre')" >
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li v-for="i in pagination.navigatepageNums" :class="{ 'active': pagination.pageNum==i }"><a href="#" @click="jumpByNumber(i)">{{ i }}</a></li>
                                <li :class="{ 'disabled': pagination.pageNum==pagination.pages }">
                                    <a href="#" aria-label="Next" @click="jumpPage('next')">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>

                    <!--办公设备tab页 equipment==设备-->
                    <div role="tabpanel" class="tab-pane" id="equipment_category">
                        <!--顶部搜索框-->
                        <div class="row" style="margin-top: 15px">
                            <div class="col-sm-4">
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="输入设备名称" v-model="searchEquipmentProduct">
                                    <span class="input-group-btn">
                                <button class="btn btn-default" type="button" @click="searchEquipment">搜索</button>
                            </span>
                                </div>
                            </div>

                            <!-- 申请物品信息提示框 -->
                            <div class="col-sm-12" >
                                <div class="alert alert-success fade hide" style="text-align: center;margin-bottom: -10px;margin-top: 10px" role="alert" ><strong>申请成功,</strong></div>
                                <div class="alert alert-danger fade hide" style="text-align: center;margin-bottom: -10px;margin-top: 10px" role="alert" ><strong>申请失败,</strong></div>
                            </div>
                        </div>
                        <!--物品列表-->
                        <table class="table table-hover table-condensed">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>类型</th>
                                <th>价格</th>
                                <th>数量</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="equipment in equipments">
                                <td>{{ equipment.product_name }}</td>
                                <td>{{ equipment.product_type }}</td>
                                <td>￥{{ equipment.product_price }}</td>
                                <td>{{ equipment.product_num }}</td>
                                <td>
                                    <button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#applyModal" @click="applyEquipmentProduct(equipment)" v-if="equipment.product_num>0">申请借入</button>
                                    <button type="button" class="btn btn-danger btn-sm" disabled="disabled" v-else>库存不足</button>
                                </td>
                            </tbody>
                        </table>
                        <!--分页导航栏-->
                        <nav aria-label="Page navigation" style="text-align: center">
                            <ul class="pagination">
                                <li :class="{ 'disabled': pagination.pageNum==1 }">
                                    <a href="#" aria-label="Previous" @click="jumpPage('pre')" >
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li v-for="i in pagination.navigatepageNums" :class="{ 'active': pagination.pageNum==i }"><a href="#" @click="jumpByNumber(i)">{{ i }}</a></li>
                                <li :class="{ 'disabled': pagination.pageNum==pagination.pages }">
                                    <a href="#" aria-label="Next" @click="jumpPage('next')">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</html>